<template>
    <div>
        <div class="tab-back">
            <a class="left" @click="toback()"></a>
            <div class="title">定时下架设置</div>
            <div class="right"></div>
        </div>
        <div class="box-r4" style="padding: 0px 15px;">
            <div class="tips_af" style="border-bottom: none;">
                <div class="tips_af_box">
                    <div class="af_left"><b>定时下架</b><span>在设置时间后自动下架</span></div>
                    <div class="af_right"><label class="am-switch"><input type="checkbox" name="" class="am-switch-checkbox" value="off" v-model="isregularsoldout"><div class="checkbox"></div></label></div>
                </div>
            </div>
            <div v-if="isregularsoldout" style="padding-bottom: 10px">
                <input type="text"  readonly placeholder="选择下架时间" @click="showPicker2 = true" class="inputpicker" v-model="regularsoldouttime" style="margin-top: 0"/>
                <van-popup v-model="showPicker2" position="bottom">
                    <van-datetime-picker type="datetime" title="选择时间" :min-date="minDate" @cancel="showPicker2 = false" @confirm="onConfirmLimittime"/>
                </van-popup>
            </div>
        </div>
        <input type="button" class="red_btn btn-bottom" value="确认设置" @click="changesub()">
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return {
                materialsid:"",
                isregularsoldout:false,
                showPicker2:false,
                minDate:new Date(),
                regularsoldouttime:""
            }
        },
        mounted(){
            this.materialsid=this.$route.query.id;
            this.getDetail();
        },
        methods:{
            getDetail(){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/materials/detail",
                    params: {   materialsid:that.materialsid, buyshow:0},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.isregularsoldout=res.data.data.materials.isregularsoldout=="1"?true:false;
                            that.regularsoldouttime=res.data.data.materials.regularsoldouttime;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            changesub(){
                var that=this;

                that.$dialog.confirm({
                    title: "定时下架",
                    message:"当下架后买家不可以再购买，确定在"+that.regularsoldouttime+"下架此料",
                    confirmButtonText:"是",
                    cancelButtonText:"否"
                }).then(() => {
                    that.request1.post1({
                        url: that.Url + "api/materials/myDetailSave",
                        params: { materialsid:that.materialsid, isregularsoldout:that.isregularsoldout?1:0, regularsoldouttime:that.regularsoldouttime},
                        success: function (res) {
                            console.log(res)
                            if (res.data.code == 1) {
                                that.$toast.success("修改成功");
                                that.$router.go(-1);
                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
                            alert(error.data.msg)
                        }
                    })
                }).catch(() => {
                    // on cancel
                });

            },
            //选择时间
            onConfirmLimittime(val){
                let year = val.getFullYear();
                let month = val.getMonth() + 1
                let day = val.getDate()
                let hour = val.getHours()
                let minute = val.getMinutes()
                if (month >= 1 && month <= 9) { month = `0${month}` }
                if (day >= 1 && day <= 9) { day = `0${day}` }
                if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
                if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
                this.regularsoldouttime=`${year}-${month}-${day} ${hour}:${minute}`;
                this.showPicker2=false;
            },
            toback(){
                this.$router.go(-1);//返回上一层
            },
        }
    }
</script>

<style scoped>
    .tab-back {
        height: 44px;
        background: #fc5d4d;
        display: -webkit-box;
    }
    .tab-back .left {
        width: 44px;
        display: block;
        height: 44px;
        background: url() no-repeat 50%;
        background-size: 9px 16px;
    }
    .tab-back .title {
        -webkit-box-flex: 1;
        font-size: 15px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        line-height: 44px;
    }
    .tab-back .right {
        width: 44px;
        height: 44px;
    }
    .box-r4, .red_btn {
        border-radius: 4px;
    }
    .box-r4 {
        display: block;
        background: #fff;
        margin: 7px 10px 0;
        padding: 0 15px;
        overflow: hidden;
    }
    .tips_af {
        border-top: .5px solid #e4e4e4;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .tips_af .tips_af_box {
        display: -webkit-box;
    }
    .tips_af .tips_af_box .af_left {
        -webkit-box-flex: 1;
    }
    .tips_af .tips_af_box b {
        font-size: 13px;
        font-weight: 700;
        color: #000;
        display: block;
        line-height: 36px;
        padding-bottom: 2px;
    }
    .tips_af .tips_af_box .af_right {
        width: 37px;
        margin-top: 9px;
    }
    .am-switch, .am-switch .checkbox {
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
    }
    .am-switch input[type=checkbox] {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        border: 0 none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .am-switch .checkbox {
        width: 51px;
        height: 31px;
        border-radius: 31px;
        background: #e5e5e5;
        z-index: 0;
        margin: 0;
        padding: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 0;
        transition: all .3s;
    }
    .am-switch .checkbox {
        width: 38px;
        height: 20px;
        background: #7f7f7f;
    }
    .am-switch, .am-switch .checkbox {
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
    }
    .am-switch .checkbox:before {
        width: 48px;
        box-sizing: border-box;
        z-index: 1;
        transform: scale(1);
    }
    .am-switch .checkbox:after, .am-switch .checkbox:before {
        content: " ";
        position: absolute;
        left: 1.5px;
        top: 1.5px;
        height: 28px;
        border-radius: 28px;
        background: #fff;
        transition: all .2s;
    }
    .am-switch .checkbox:before {
        left: -2px;
        width: 35px;
        height: 18px;
        border-radius: 18px;
        background: #7f7f7f;
    }
    .am-switch .checkbox:after {
        width: 28px;
        z-index: 2;
        transform: translateX(0);
        box-shadow: 2px 2px 4px rgba(0,0,0,.21);
    }
    .am-switch .checkbox:after {
        left: -1px;
        height: 18px;
        width: 18px;
        border-radius: 18px;
        top: 1px;
    }
    .am-switch input[type=checkbox]:checked + .checkbox {
        background: #4dd865;
    }
    .am-switch input[type=checkbox]:checked + .checkbox:before {
        transform: scale(0);
    }
    .am-switch input[type=checkbox]:checked + .checkbox:after {
        transform: translateX(20px);
    }
    .red_btn {
        background: #fc5d4d;
        color: #fff;
        font-size: 14px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        width: 90%;
        margin: 20px 5% 100px;
        box-shadow: 0 5px 10px #f6a59f;
    }
    .box-r4, .red_btn {
        border-radius: 4px;
    }
    .btn-bottom {
        position: fixed;
        bottom: 20px;
        margin-bottom: 0 !important;
    }
    .inputpicker{
        height: 28px;
        border-radius: 4px;
        font-size: 13px;
        border: 1px solid #e5e5e5;
        padding: 0 4%;
        /*box-sizing: border-box;*/
        background: #fff;
        width: 92%;
        display: block;
        margin-top: 10px;
    }
</style>